<template>
  <div class="app-container">
    <div class="action-button">
      <el-button icon="el-icon-plus" type="primary" size="small" @click="add">添加</el-button>
      <el-button icon="el-icon-delete" type="danger" size="small" @click="delAll">删除</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column align="left" label="ID" width="100px">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column label="名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column label="权限路径" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.uri }}</span>
        </template>
      </el-table-column>

      <el-table-column label="添加" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.postMethod">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>

      <el-table-column label="删除" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.deleteMethod">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>

      <el-table-column label="修改" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.putMethod">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>

      <el-table-column label="查询" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.getMethod">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>

      <el-table-column label="备注" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="创建时间" width="200px">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ new Date(parseInt(scope.row.createTime)).toLocaleString() }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="toEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>

import { getList, deleteById, deleteAll } from '@/api/system/permission'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data
      }).finally(() => {
        this.listLoading = false
      })
    },
    add() {
      this.$router.push({ name: 'permissionEdit', params: { id: 0 }})
    },
    toEdit(id) {
      this.$router.push({ name: 'permissionEdit', params: { id: id }})
    },
    del(id) {
      this.$confirm('删除后不可恢复，确认删除？')
        .then(_ => {
          deleteById(id).then(() => {
            this.fetchData()
          })
        })
        .catch(_ => {})
    },
    delAll() {
      const modelList = this.$refs.userTable.selection
      const idList = []
      modelList.forEach((model) => idList.push(model.id))
      if (idList.length < 1) {
        return
      }
      console.log(idList)

      this.$confirm('确定要删除' + idList.length + '条数据？')
        .then(_ => {
          deleteAll(idList).then((res) => {
            if (res.code === 0) {
              this.$message.success('删除成功')
              this.fetchData()
            }
          })
        })
        .catch(_ => {})
    }
  }
}
</script>
